<template>
  <!-- 告警记录 -->
  <div class="underground-personnel">
    <div class="search-wrap">
      <HerinSelect
        v-model="selectType"
        class="herin-select"
        :options="selectOption"
        place-holder=""
        :height="28"
        :width="130"
        :showOptionscount="4"
        @HerinSelectChange="handleSelectChange"
      />
      <div class="input-box">
        <input v-model="searchInput" type="text" placeholder="搜索..." />
        <i
          v-show="searchInput"
          class="el-icon el-icon-close"
          @click="clearInput"
        />
        <i class="el-icon el-icon-search" @click="handleSearch" />
      </div>
    </div>

    <div class="list-content">
      <div
        class="personnel-list"
        v-infinite-scroll="scrollLists"
        infinite-scroll-distance="120"
        infinite-scroll-immediate="false"
        :style="{ visibility: !alarmRecordList.length ? 'hidden' : 'visible' }"
      >
        <div
          v-for="it in alarmRecordList"
          :key="it?.id"
          :class="{ item: true, active: alarmStatus === it?.id }"
          @click="sendMessage(it?.id)"
        >
          <div class="row">
            <div class="name-type">
              <span class="tag-button">{{ it?.module }}</span>
              <span class="name">{{ it?.msg }}</span>
            </div>
          </div>
          <div class="row last">
            <div>{{ it?.createTime }}</div>
            <div class="addr">
              <img src="@/assets/img/dispath/addr.png" />
              <span>{{ it?.address }}</span>
            </div>
          </div>
        </div>
      </div>
      <herin-tip :show-tip="!alarmRecordList.length" :type="showTipType" />
    </div>
  </div>
</template>

<script>
import HerinTip from '@/components/HerinTip';
import HerinSelect from '@/components/herinselect/HerinSelect.vue';
import { getAlarmType, queryAlarmRecords } from '@/api/item/dispatch/index';
export default {
  components: {
    HerinSelect,
    HerinTip
  },

  data() {
    return {
      showTipType: 'empty',
      searchInput: '',
      selectType: '全部类型',
      selectOption: [{ label: '全部类型', value: '全部类型' }],
      alarmRecordList: [],
      current: 0,
      size: 100,
      total: 0
    };
  },

  computed: {
    alarmStatus() {
      return this.$store.state.alarmStatus;
    }
  },
  mounted() {
    this.getAlarmType();
    this.queryAlarmRecords();
  },

  methods: {
    async queryAlarmRecords() {
      const params = {
        'current': this.current,
        'keyWord': this.searchInput,
        'size': this.size
      };
      if (this.selectType !== '全部类型') {
        params['type'] = this.selectType;
      }

      const res = await queryAlarmRecords(params);
      if (res.data.code === 200) {
        const records = res.data.data.records;
        this.alarmRecordList = [...this.alarmRecordList, ...records];
        this.total = res.data.data.total;
      }
    },

    clearInput() {
      this.searchInput = '';
      this.current = 0;
      this.alarmRecordList = [];
      this.queryAlarmRecords();
    },

    handleSelectChange() {
      this.current = 0;
      this.alarmRecordList = [];
      this.queryAlarmRecords();
    },

    handleSearch() {
      this.current = 0;
      this.alarmRecordList = [];
      this.queryAlarmRecords();
    },

    scrollLists() {
      const pages = Math.ceil(this.total / this.size);
      if (this.current < pages) {
        this.current++;
        this.queryAlarmRecords();
      }
    },

    async getAlarmType() {
      const res = await getAlarmType();
      if (res.data.code === 200) {
        const lists = res.data.data.map(item => {
          return {
            value: item.key,
            label: item.value
          };
        });
        this.selectOption = [...[{ label: '全部类型', value: '全部类型' }], ...lists];
      }
    },

    sendMessage(id) {
      // 设置 alarmStatus 值
      this.$store.commit('setData', { name: 'alarmStatus', value: id });

      this.$store.dispatch('postToEngine', { sceneName: 'ALARM', data: id });
    }
  }
};
</script>

<style lang="scss" scoped>
  // underground-personnel
  .underground-personnel {
    .personnel-title {
      display: flex;
      justify-content: space-between;
      font-size: $auxiliaryText;
      color: $light2Grey;
      height: 0.875rem;
      line-height: 0.875rem;
      .num {
        color: $lightGrey;
      }
    }
    .search-wrap {
      display: flex;
      justify-content: space-between;
      .herin-select-options{
        height: 12.5rem;
      }
      .input-box {
        width: 11.875rem;
        height: 1.75rem;
        border: 0.0625rem solid rgba($color: #ffffff, $alpha: 0.2);
        border-radius: 0.25rem;
        position: relative;
        text-align: left;
        box-sizing: border-box;
        input {
          width: 72%;
          height: 100%;
          margin: 0 0.625rem;
          border: none;
          font-size: 0.75rem;
          color: rgba($color: $white, $alpha: 0.9);
          background-color: transparent;
          outline-width: 0rem;
        }
        input::-webkit-input-placeholder {
          font-size: 0.75rem;
          color: $secondaryTextColor;
        }
        .el-icon {
          display: inline-block;
          width: 0.875rem;
          height: 0.875rem;
          line-height: 0.875rem;
          font-size: 0.75rem;
          cursor: pointer;
          color: rgba($color: $white, $alpha: 0.5);
          position: absolute;
          top: 0.4375rem;
          &-close {
            right: 1.375rem;
          }
          &-search {
            right: 0.25rem;
            font-size: 0.75rem;
          }
        }
      }
    }
    .list-content {
      position: relative;
      .personnel-list {
        width: calc(100% + 10px);
        padding-right: 0.4375rem;
        height: 7.5rem;
        overflow: auto;
        // margin-top: 0.625rem;
        .item {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 3.75rem;
          padding: 0.625rem 0.625rem 0.625rem 0;
          border-bottom: 0.0625rem solid rgba($color: #ffffff, $alpha: 0.1);
          div {
            cursor: pointer;
          }
          &.active {
            background-color: $itemActiveBg;
          }
          // &:hover {
          //   background-color: $itemActiveBg;
          // }
          .row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: $auxiliaryText;
            height: 0.875rem;
            line-height: 0.875rem;
            .name-type {
              .name {
                color: $light3Grey;
                font-size: $commonContentText;
                margin-left: 0.625rem;
              }
              .tag-button {
                @include tag-btn();
              }
            }
            .long {
              color: $lightGrey;
              &.alarm {
                color: $red;
              }
            }
            .addr {
              img {
                width: 0.75rem;
                height: 0.75rem;
                margin-right: 0.25rem;
                vertical-align: bottom;
              }
            }
            &.last {
              color: $lightGrey;
            }
          }
        }
      }
    }
  }
.anaiyse-chert {
  height: 137px;
  padding-top: 10px;
}
</style>
